import React, { useState } from 'react';
import { connect } from 'react-redux';
import { debounce } from '@/utils/helper';
import { View, Button, Text, Image, Input } from '@tarojs/components';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import infoImg from '@/giftCardSubPack/images/giftCardSelect/info.png';
import cameraImg from '@/giftCardSubPack/images/digitalCard/icon-camera.png';
import './index.scss';

const BindGiftCard = ({ dispatch, appConfig }) => {
  const { router } = getCurrentInstance();
  const { params = {} } = router;
  console.log(params);
  const [val, setVal] = useState({});
  const { cardMark = '', secretKey = '' } = val;
  const inputHandler = (key, e) => {
    let value = e.detail.value || '';
    value = value.replace(/[^0-9a-zA-Z]/g, '').trim();
    if (key === 'cardMark') {
      value = value.replace(/(.{4})/g, '$1 ').trim();
    }
    setVal({ ...val, [key]: value });
  };

  const handleSave = debounce(() => {
    if (!cardMark) {
      return Taro.showToast({
        mask: true,
        title: '请输入券号',
        icon: 'none',
        duration: 1000,
      });
    }

    dispatch({
      type: 'fineCard/fineCardBind',
      payload: {
        cardMark: cardMark.replace(/\s*/g, ''),
        secretKey: secretKey.replace(/\s*/g, ''),
      },
    })
      .then(() => {
        Taro.showToast({
          mask: true,
          title: '绑定成功',
          icon: 'success',
          duration: 1000,
        });
        setTimeout(() => {
          Taro.navigateBack();
        }, 1000);
      })
      .catch(() => {});
  }, 2000);

  return (
    <>
      <View className="bind-gift-card">
        <View className="inner-wrap">
          <View className="inner">
            <View className="alert-info">
              <View className="clean-white">
                <Image src={infoImg} className="info-img" />
              </View>
              <Text className="text">
                {appConfig?.name}商城是{appConfig?.name}提货券唯一官方认可的销售平台。
                如果通过其他渠道购买，可能会造成{appConfig?.name}提货券 无法使用的情况。
              </Text>
            </View>
            <View className="input-view">
              <Input
                controlled
                value={val.cardMark}
                onInput={(e) => {
                  inputHandler('cardMark', e);
                }}
                onBlur={() => {
                  console.log('sss');
                }}
                placeholderClass="placeholder"
                placeholder="请输入券号"
              />
              <Image src={cameraImg} className="icon" />
            </View>

            <View className="input-view">
              <Input
                value={val.secretKey}
                onInput={(e) => {
                  inputHandler('secretKey', e);
                }}
                placeholder="请输入券密"
                placeholderClass="placeholder"
              />
            </View>
          </View>
          <View className="btn-bottom">
            <Button className="btn" onClick={handleSave}>
              {params.from === 'mine' ? '保存' : '保存并使用'}
            </Button>
          </View>
        </View>
      </View>
    </>
  );
};
export default connect(({ otherApi }) => ({
  appConfig: otherApi.appConfig,
}))(BindGiftCard);
